<template>
  <h1>商品列表</h1>
  <hr />
  <el-table :data="goodsList" style="width: 100%" height="90%" v-loading="loading">
    <el-table-column fixed prop="proid" label="商品编号" width="200" />
    <el-table-column label="图片" width="200">
      <template #default="scope">
        <img class="img" :src="scope.row.img1" />
      </template>
    </el-table-column>
    <el-table-column prop="proname" label="名称" width="320" />
    <el-table-column prop="brand" label="品牌" width="80" />
    <el-table-column prop="originprice" label="价格" width="80" />
    <el-table-column prop="discount" label="折扣" width="80" />
    <el-table-column prop="sales" label="销量" width="110" />
    <el-table-column prop="stock" label="库存" width="110" />
    <el-table-column prop="isseckill" label="是否秒杀" width="100">
      <template #default="scope">
        <el-switch :active-value="1" :inactive-value="0"
          style="--el-switch-on-color: #76b1e1"
          v-model="scope.row.isseckill"
          @change="changekill(scope.row.proid, scope.row.isseckill)"
        />
      </template>
    </el-table-column>
    <el-table-column prop="isrecommend" label="是否推荐" width="100">
      <template #default="scope">
        <el-switch :active-value="1" :inactive-value="0"
          style="--el-switch-on-color: #76b1e1"
          v-model="scope.row.isrecommend"
          @change="changeFlag(scope.row.proid, scope.row.isrecommend)"
        />
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    :page-size="params.limitNum"
    layout="prev, pager, next ,jumper"
    :total="total"
    @current-change="CurrentChange"
    height="20%"
  />
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import service from "../../../utils/service";
import { ElMessage } from "element-plus";
import "element-plus/dist/index.css";

const loading = ref(true)

// 总数
const total = ref(0);

// 商品数据
interface IGoods {
  proid: string;
  banners: [];
  category: string;
  brand: string;
  proname: string;
  originprice: number;
  sales: number;
  stock: number;
  desc: string;
  issale: number;
  isrecommend: number;
  discount: number;
  isseckill: number;
  img1: string;
  img2: string;
  img3: string;
  img4: string;
}
const goodsList = reactive<IGoods[]>([]);

// 分页数据
const params = reactive<{
  count: number;
  limitNum: number;
}>({
  count: 1,
  limitNum: 8,
});

// 获取商品数据
const getGoodsList = () => {
  service({
    url: "/admin/pro/list",
    params,
  }).then((res) => {
    if (res.data.code === "200") {
      total.value = res.data.total;

      goodsList.length = 0;
      goodsList.push(...res.data.data);

      loading.value = false
    }
  });
};
getGoodsList();

// 当前页变动时候触发的事件
const CurrentChange = (value: number) => {
  params.count = value;
  getGoodsList();
};

//修改是否秒杀
const changekill = (id: string, flag: string) => {
  service({
    url: `/admin/pro/updateFlag`,
    method: "post",
    data: {
      proid: id,
      type: "isseckill",
      flag: flag,
    },
  }).then((res: any) => {
    if (res.data.code === "200") {
      ElMessage({
        message: "秒杀更改成功！",
        type: "success",
      });
    }
  });
};
//修改是否推荐
const changeFlag = (id: string, flag: string) => {
  service({
    url: `/admin/pro/updateFlag`,
    method: "post",
    data: {
      proid: id,
      type: "isrecommend",
      flag: flag,
    },
  }).then((res: any) => {
    if (res.data.code === "200") {
      ElMessage({
        message: "秒杀更改成功！",
        type: "success",
      });
    }
  });
};
</script>

<style scoped>
.img {
  width: 200px;
  height: 150px;
}
</style>